<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.css">
</head>

<body>
    <div id="header">
        <div class="header wrap">
            <!-- left -->
            <div class="header_l float_left">十三年品质保障的名酒特卖场</div>
            <!-- center -->
            <div class="header_c float_left">
                <a href="./register.html" class="reg">免费注册</a>&nbsp;
                <span class="hline">|&nbsp;</span>
                <a href="./login.html" class="reg">登录</a>
            </div>
            <!-- right -->
            <div class="header_r float_right">
                <div class="shopCar float_left">
                    <a href="#">我的酒窖</a>
                    <a href="./shopcar.html">购物车</a>
                </div>
                <span class="hline float_left">|</span>
                <div class="header_rli float_right">
                    订购热线400-884-1919
                </div>
            </div>
        </div>
    </div>
    <!--   -->
    <div class="positionBox">
        <div class="indexRight_inner">
            <div><img src="http://www.19online.cn/static/img/right_icon01.png"></div>
            <div>
                <p>VIP</p>
            </div>
            <div><img src="http://www.19online.cn/static/img/right_icon02.png"></div>
            <div>
                <p>购<br>物<br>车</p>
            </div>

        </div>

    </div>

    <!-- header 搜索区 -->
    <div id="search_inner">
        <div class="header-search wrap">
            <div class="search_inner_top wrap">
                <!-- left -->
                <div class="search-left float_left">
                    <img src="../images/logo01.png">
                </div>
                <!-- center -->
                <div class="search-middle float_left">
                    <!-- <div class="search_bar">
                        <input type="text" id="q" name="q" placeholder="输入要查找的商品或品牌名称">
                        <a href="javascript:;" onclick="searchProduct()">搜索</a>
                    </div> -->
                    <form action="javascript:;" name="search-form">
                        <input type="text" name="search-content">
                        <input type="submit" value="搜索">
                        <!-- <ul id="search-list">

    </ul> -->
                    </form>
                    <ul id="search-list">

                    </ul>


                    <div class="search_bar_text">
                        <a href="#">拉菲</a> |
                        <a href="#">茅台</a> |
                        <a href="#">红酒</a> |
                        <a href="#">尊尼获加</a> |
                        <a href="#">蓝牌</a> |
                        <a href="#">锐澳</a> |
                        <a href="#">卡慕</a> |
                        <a href="#">江小白</a>
                    </div>
                </div>
                <!-- right -->
                <div class="search-right float_left">
                    <img src="../images/search_right.png" alt="">
                </div>

                <!-- search_inner_bottom -->

            </div>
            <div class="search_inner_bottom">
                <div class="classify float_left">商品快速分类</div>
                <div class="menu_list">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">列级名庄</a></li>
                        <li><a href="#">场合选酒</a></li>
                        <li><a href="#">活动专区</a></li>
                        <li><a href="#">积分商城</a></li>
                        <li><a href="#">店面展示</a></li>
                        <li><a href="#">招商加盟 </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- banner -->
    <div id="banner">
        <div class="bannerUl-wrap wrap">
            <!-- nav区域 -->
            <ul class="nav float_left">
                <li class="shop">
                    <div class="shopName">
                        <span><a href="#">白酒</a></span>
                        <p><a href="#">茅台</a>
                            <a href="#">五粮液</a>
                            <a href="#">剑南春</a>
                            <a href="#">文君酒</a>
                            <a href="#">酱香型</a>
                            <a href="#">浓香型</a>
                            <a href="#">酒中酒</a>
                        </p>
                    </div>
                    <!-- showNav -->
                    <div class="showNav">
                        <div class="sort_l float_left">
                            <span class="fenLei">白酒品牌</span>
                            <div class="navT">
                                <a href="#">五粮液</a>
                                <span>|</span>
                                <a href="#">剑南春</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">五粮液</a>
                                <span>|</span>
                                <a href="#">剑南春</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">五粮液</a>
                                <span>|</span>
                                <a href="#">剑南春</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                                <span>|</span>
                                <a href="#">文君酒</a>
                            </div>

                            <span class="fenLei">香型</span>
                            <div class="navT">
                                <a href="#">酱香型</a>
                                <span>|</span>
                                <a href="#">浓香型</a>
                                <span>|</span>
                                <a href="#">酒中酒</a>
                                <span>|</span>
                                <a href="#">酱香型</a>
                                <span>|</span>
                                <a href="#">浓香型</a>
                                <span>|</span>
                                <a href="#">酒中酒</a>
                            </div>
                            <span class="fenLei">度数</span>
                            <div class="navT">
                                <a href="#">低度白酒</a>
                                <span>|</span>
                                <a href="#">中度白酒</a>
                                <span>|</span>
                                <a href="#">高度白酒</a>
                            </div>
                            <span class="fenLei">年份</span>
                            <div class="navT">
                                <a href="#">1-4年</a>
                                <span>|</span>
                                <a href="#">5-10年</a>
                                <span>|</span>
                                <a href="#">10-15年</a>
                                <span>|</span>
                                <a href="#"> 15-20年</a>
                                <span>|</span>
                                <a href="#">20年以上</a>
                            </div>
                            <span class="fenLei">价格</span>
                            <div class="navT">
                                <a href="#">1-99元</a>
                                <span>|</span>
                                <a href="#">100-199元</a>
                                <span>|</span>
                                <a href="#">200-499元</a>
                                <span>|</span>
                                <a href="#"> 500-999元</a>
                                <span>|</span>
                                <a href="#">1000元以上</a>
                            </div>

                        </div>
                        <div class="sortImg float_left">
                            <span>本周精选</span>
                            <div class="picBox">
                                <img src="../images/sort.jpg" alt="">

                            </div>
                            <p>五粮液52度第七代普五经典装(500ML)</p>
                            <h4>￥998</h4>
                            <div class="buyBox">
                                <a href="#">购买</a>
                            </div>
                        </div>


                    </div>
                    <!-- showNav -->
                </li>
                <li class="shop">
                    <div class="shopName">
                        <span><a href="#">红酒</a></span>
                        <p><a href="#">茅台</a>
                            <a href="#">五粮液</a>
                            <a href="#">剑南春</a>
                            <a href="#">文君酒</a>
                            <a href="#">酱香型</a>
                            <a href="#">浓香型</a>
                            <a href="#">酒中酒</a>
                        </p>
                    </div>
                    <div class="showNav">
                        <img src="../images/nav.PNG" alt="">

                    </div>
                </li>
                <li class="shop">
                    <div class="shopName">
                        <span><a href="#">葡萄酒</a></span>
                        <p><a href="#">茅台</a>
                            <a href="#">五粮液</a>
                            <a href="#">剑南春</a>
                            <a href="#">文君酒</a>
                            <a href="#">酱香型</a>
                            <a href="#">浓香型</a>
                            <a href="#">酒中酒</a>
                        </p>
                    </div>
                    <div class="showNav">
                        <img src="../images/nav2.PNG" alt="">

                    </div>
                </li>
                <li class="shop">
                    <div class="shopName">
                        <span><a href="#">洋酒</a></span>
                        <p><a href="#">茅台</a>
                            <a href="#">五粮液</a>
                            <a href="#">剑南春</a>
                            <a href="#">文君酒</a>
                            <a href="#">酱香型</a>
                            <a href="#">浓香型</a>
                            <a href="#">酒中酒</a>
                        </p>
                    </div>
                    <div class="showNav">
                        <img src="../images/nav.PNG" alt="">

                    </div>
                </li>
                <li class="shop">
                    <div class="shopName">
                        <span><a href="#">起泡酒</a></span>
                        <p><a href="#">茅台</a>
                            <a href="#">五粮液</a>
                            <a href="#">剑南春</a>
                            <a href="#">文君酒</a>
                            <a href="#">酱香型</a>
                            <a href="#">浓香型</a>
                            <a href="#">酒中酒</a>
                        </p>
                    </div>
                    <div class="showNav">
                        <img src="../images/nav2.PNG" alt="">
                    </div>
                </li>
            </ul>
            <div id="container" class="swiper-container float_left">
                <div class="swiper-wrapper">
                    <li class="swiper-slide"><img src="../images/banner1.jpg" alt=""></li>
                    <li class="swiper-slide"><img src="../images/banner2.jpg" alt=""></li>
                    <li class="swiper-slide"><img src="../images/banner3.jpg" alt=""></li>
                    <li class="swiper-slide"><img src="../images/banner4.jpg" alt=""></li>
                    <li class="swiper-slide"><img src="../images/banner5.jpg" alt=""></li>
                    <li class="swiper-slide"><img src="../images/banner6.jpg" alt=""></li>
                    <li class="swiper-slide"><img src="../images/banner7.jpg" alt=""></li>
                </div>
                <!--  <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
                <div class="swiper-pagination"></div>
            </div>

        </div>
    </div>
    <!-- 天天特惠 -->
    <div id="discount-every">
        <div class="discount-wrap wrap">
            <div class="discount-title">
                <img src="../images/item01_left.png" alt="">
                <img src="../images/item01_right.png" alt="">
            </div>
            <div class="discountBox">
                <div class="discount-pic">
                    <div id="gallery" class="swiper-container float_left">
                    </div>
                    <div id="thumbs" class="swiper-container list float_left">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="../images/discount1.jpg" alt="">
                                <p>茅台赖茅端曲53度(500ML)</p>
                                <span>￥998</span>


                            </div>
                            <div class="swiper-slide">
                                <img src="../images/discount2.jpg" alt="">
                                <p>美国爱斯福斯冰狐伏特加</p>
                                <span>￥598</span>

                            </div>
                            <div class="swiper-slide"><img src="../images/discount3.jpg" alt="">
                                <p>茅台赖茅端曲53度(500ML)</p>
                                <span>￥498</span>
                            </div>
                            <div class="swiper-slide"><img src="../images/discount4.jpg" alt="">
                                <p>五粮液52度(500ML)</p>
                                <span>￥398</span>
                            </div>
                            <div class="swiper-slide"><img src="../images/discount5.jpg" alt="">
                                <p>茅台赖茅端曲53度(500ML)</p>
                                <span>￥298</span>
                            </div>
                            <div class="swiper-slide"><img src="../images/discount1.jpg" alt="">
                                <p>美国爱斯福斯冰狐伏特加</p>
                                <span>￥198</span>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="box">
                    <ul class="tips">
                        <li>2020女生节</li>
                        <li>2020年货大集</li>
                        <li>花好月圆,中秋团购集</li>
                        <li>2020女生节</li>
                        <li>2020年货大集</li>
                    </ul>
                    <div class="tipImg">
                        <img src="../images/guanzhou.jpg" alt="">
                    </div>

                </div>
            </div>

        </div>

    </div>
    <div id="discountWeek">
        <div class="discount-week wrap">
            <div class="discount-title">
                <img src="../images/item02_left.png" alt="">
            </div>
            <div class="discountPics">
                <div class="discount_l scaleBtn">
                    <a href="#"><img src="../images/wine1.jpg" alt=""></a>
                </div>
                <div class="discount_c scaleBtn">
                    <a href="#"><img src="../images/wine2.jpg" alt=""></a>
                </div>
                <div class="discount_r scaleBtn">
                    <a href="#"><img src="../images/wine3.jpg" alt=""></a>
                </div>
            </div>
        </div>
    </div>


    <!-- 111 -->
    <div id="imgShow">
        <div class="imgShow-wrap wrap">
            <img src="../images/banner_line.png" alt="">
        </div>
    </div>
    <!-- 酒类 -->
    <!-- 白酒馆  -->
    <div id="wine">
        <div class="wine-wrap wrap">
            <!-- 酒馆名称 -->
            <div class="wineTit">
                <div class="wineTbox">
                    <div class="wineTit_l">
                        <img src="../images/item03_left.png" alt="">
                    </div>
                    <div class="wineTit_r">
                        <a href="#">茅台</a>
                        <a href="#">五粮液</a>
                        <a href="#">剑南春</a>
                        <a href="#">酒中酒</a>
                        <a href="#">老村长</a>
                        <a href="#">郎酒</a>
                    </div>
                </div>
            </div>
            <!-- 图片show -->
            <div class="product">
                <div class="product_l">
                    <img src="../images/bigwine.jpg" alt="">
                </div>
                <div class="product_r">
                    <ul class="productBox1">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 2 -->
    <div id="wine">
        <div class="wine-wrap wrap">
            <!-- 酒馆名称 -->
            <div class="wineTit">
                <div class="wineTbox">
                    <div class="wineTit_l">
                        <img src="../images/item08_left.png" alt="">
                    </div>
                    <div class="wineTit_r colorChange">
                        <a href="#">轩尼诗</a>
                        <a href="#">人头马</a>
                        <a href="#">马爹利</a>
                        <a href="#">尊尼获加</a>
                        <a href="#">轩尼诗</a>
                        <a href="#">人头马</a>
                    </div>
                </div>
            </div>
            <!-- 图片show -->
            <div class="product">
                <div class="product_l">
                    <img src="../images/bigwine2.jpg" alt="">
                </div>
                <div class="product_r">
                    <ul class="productBox2">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 3 -->
    <div id="wine">
        <div class="wine-wrap wrap">
            <!-- 酒馆名称 -->
            <div class="wineTit">
                <div class="wineTbox">
                    <div class="wineTit_l">
                        <img src="../images/item04_left.png" alt="">
                    </div>
                    <div class="wineTit_r colorChange1">
                        <a href="#">轩尼诗</a>
                        <a href="#">人头马</a>
                        <a href="#">马爹利</a>
                        <a href="#">尊尼获加</a>
                        <a href="#">轩尼诗</a>
                        <a href="#">人头马</a>
                    </div>
                </div>
            </div>
            <!-- 图片show -->
            <div class="product">
                <div class="product_l">
                    <img src="../images/bigwine3.jpg" alt="">
                </div>
                <div class="product_r">
                    <ul class="productBox3">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 4 -->
    <div id="wine">
        <div class="wine-wrap wrap">
            <!-- 酒馆名称 -->
            <div class="wineTit">
                <div class="wineTbox">
                    <div class="wineTit_l">
                        <img src="../images/item06_left.png" alt="">
                    </div>
                    <div class="wineTit_r colorChange2">
                        <a href="#">轩尼诗</a>
                        <a href="#">人头马</a>
                        <a href="#">马爹利</a>
                        <a href="#">尊尼获加</a>
                        <a href="#">轩尼诗</a>
                        <a href="#">人头马</a>
                    </div>
                </div>
            </div>
            <!-- 图片show -->
            <div class="product">
                <div class="product_l">
                    <img src="../images/bigwine5.jpg" alt="">
                </div>
                <div class="product_r">
                    <ul class="productBox4">
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="endBanner">
        <div class="endBanner-wrap wrap">
            <img src="../images/end.png" alt="">

        </div>
    </div>
    <div id="footer">
        <div class="footer-wrap wrap">
            <div class="footerTop">
                <img src="../images/footer01.png" alt="">

            </div>
            <div class="footerCenter">
                <ul class="footCenter_l">
                    <li>
                        <h3>购物指南</h3>
                        <p><a href="#">购物演示</a></p>
                        <p><a href="#">新用户注册</a></p>
                        <p><a href="#">会员积分</a></p>

                    </li>
                    <li>
                        <h3>支付帮助</h3>
                        <p><a href="#">在线支付</a></p>
                        <p><a href="#">货到付款</a></p>
                        <p><a href="#">银行转账</a></p>
                        <p><a href="#">支票支付</a></p>
                        <p><a href="#">发票说明</a></p>
                    </li>
                    <li>
                        <h3>配送服务</h3>
                        <p><a href="#">运费收取标准</a></p>
                    </li>
                    <li>
                        <h3>售后服务</h3>
                        <p><a href="#">服务保障承诺</a></p>
                        <p><a href="#">如何办理退换货</a></p>
                    </li>
                    <li>
                        <h3>招商合作</h3>
                        <p><a href="#">门店加盟 </a></p>
                        <p><a href="#"> 速配网盟</a></p>
                        <p><a href="#">采购合作</a></p>
                    </li>
                </ul>
                <div class="footerCenter_r float_right">
                    <div class="footerImg1 float_left">
                        <img src="../images/erweima.png" alt="">

                    </div>
                    <div class="footerImg2 float_right">
                        <img src="../images/phone.png" alt="">

                    </div>

                </div>




            </div>


        </div>
    </div>
    <div id="footBottom">
        <div class="footerBottom-wrap wrap">
            <div class="link_list">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">人才招聘</a>
                <a href="#">招商加盟</a>
                <a href="#">友情链接</a>
                <a href="#">建言有礼</a>
            </div>
            <div class="copy_right">
                <p>copyright © 2009-2018 www.19online.cn | 经营许可证：<a href="/inc/telenet.html">粤b2-20080416</a>|<a
                        href="http://www.beian.miit.gov.cn/" target="_blank">粤icp备：06088898号 </a></p>
                <p>工商营业执照 统一社会信用代码 91440104747578468K 食品经营许可证 JY14401040008767(1-1) </p>
            </div>


        </div>

    </div>




    <script src="../javascripts/data.js"></script>
    <script src="../javascripts/utils.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>
    <script>
        var shop = document.querySelectorAll(".shop");
        var showNav = document.querySelectorAll('.showNav');
        var navT = document.querySelectorAll('.navT');
        var discountPics = document.querySelector(".discountPics")
        var container = document.querySelector(".swiper-container")
        /* 渲染 */
        var productBox1 = document.querySelector('.productBox1');
        var productBox2 = document.querySelector('.productBox2');
        var productBox3 = document.querySelector('.productBox3');
        var productBox4 = document.querySelector('.productBox4')
        for (var i = 0; i < shop.length; i++) {
            render1(i)
        }
        render2(container)
        /* 1 */
        var mySwiper = new Swiper('#gallery', {
            loop: true,
            thumbs: {
                swiper: {
                    el: '#thumbs',
                    slidesPerView: 4,
                },
                effect: "slide",
                slideThumbActiveClass: 'active'
            },
        });
        scalePic(discountPics)
        renderData(productBox1, data1);
        renderData(productBox2, data2);
        renderData(productBox3, data3);
        renderData(productBox4, data4);
        scalePic(productBox1)
        scalePic(productBox2)
        scalePic(productBox3)
        scalePic(productBox4)
        /* 百度接口搜索 */
        var SearchList = document.getElementById('search-list');
        var SearchForm = document.forms['search-form'];
        var SearchContent = SearchForm.elements['search-content'];
        var t = null;
        SearchContent.oninput = function () {
            var val = this.value;
            clearInterval(t);
            t = setTimeout(function () {
                SearchList.innerHTML = '';
                if (val !== '') {
                    var Script = document.createElement('script');
                    Script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32218_1425_31672_32139_31254_32045_32230_32299_31639&wd=' + val + '&req=2&csor=5&cb=callback'
                    document.body.appendChild(Script);
                }
            }, 100)
        }
        function callback(data) {
            var list = data.g;
            if (list === undefined) {
                return false
            }
            list.forEach(function (item) {
                var lis = document.createElement('li');

                lis.innerHTML = item.q;
                SearchList.appendChild(lis)
            })
        }


        /* 详情页 */
        var lis1 = $('.productBox1 li');
        var lis2 = $('.productBox2 li');
        var lis3 = $('.productBox3 li');
        var lis4 = $('.productBox4 li');
        function Details(ele) {
            for (var i = 0; i < ele.length; i++) {
                // list[i].idx = i;
                ele[i].onclick = function () {
                    // 获取标签中的属性 getAttribute
                    // console.log(this.getAttribute('idx'));

                    // 跳转到详情页 还需要把点击商品中的一些唯一信息传递过去
                    open('xianqing.html?id=' + this.getAttribute('idx'));
                    // location.href = '03.详情页.html'
                    // location.replace('03.详情页.html')
                }
            }
        }
        Details(lis1);
        Details(lis2);
        Details(lis3);
        Details(lis4);

    </script>
</body>

</html>